﻿<template>
    <div class="solution">
        <!-- 图片 -->
        <div class="solution-hed h-[600px] lg:h-[884px]">
            <div class="xm">
                <div
                    class="absolute w-[90%] xl:w-[80%] 2xl:w-[70%] left-1/2 -translate-x-1/2 top-[180px] lg:top-[211px] flex flex-col"
                >
                    <div class="font60" v-if="locale == 'zh-CN'">
                        <div>适用于任何行业的</div>
                        <div>
                            <span class="text-red-700">电子签名</span>
                            <span>解决方案</span>
                        </div>
                    </div>

                    <div class="font60" v-else>
                        <div class="text-red-700">E-Signatures</div>
                        <div>for Every Industry</div>
                    </div>

                    <div class="flex-1 fontSmall mt-5 lg:mt-10">
                        <p>{{ t('ComplexProcesses') }}</p>
                    </div>

                    <div class="mt-5 lg:mt-10 flex items-end">
                        <button type="button" class="big-white-btn" @click="login">
                            {{ t('GetStarted') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 行业 -->
        <div class="bg-white py-[120px]">
            <div class="m">
                <h1 class="font40 text-center">{{ t('Simple') }}</h1>

                <div class="grid grid-cols-1 lg:grid-cols-2 text-black gap-20 mt-[120px]">
                    <div
                        class="bg-[#FBFBFB] py-10 px-6 rounded-md shadow-md border border-[#E7EAEC] cursor-pointer hover:scale-105 hover:shadow-xl transition-all duration-500"
                        v-for="(item, index) in list"
                        :key="index"
                    >
                        <div class="flex items-center">
                            <img :src="item.url" alt="" class="w-[60px] md:w-[80px]" />
                            <div class="ml-5">
                                <p class="font24">{{ item.title }}</p>
                                <p class="font18">{{ item.tips }}</p>
                            </div>
                        </div>
                        <div class="mt-8 p-5 space-y-3 bg-white rounded-md">
                            <div class="flex items-baseline space-x-1" v-for="(p, i) in item.subList" :key="i">
                                <img :src="p.icon" alt="" class="w-3" />
                                <p class="flex-1 font16">{{ p.title }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 立即签约 -->
        <div class="bg-gray-900 h-[437px] md:h-[637px] qy-box relative">
            <div
                class="absolute left-1/2 -translate-x-1/2 bottom-[160px] text-white px-5 w-full flex flex-col items-center"
            >
                <h1 class="font40 text-white">
                    <span>{{ t('Start') }}</span>
                    <span class="text-red-500 ml-1">{{ t('Signing') }}</span>
                </h1>

                <p class="py-10 font16 text-white leading-8 text-center">
                    {{ t('CreateYourAccount') }}
                </p>

                <button @click="login" class="white-btn">{{ t('CreateAccount') }}</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import so1 from '@/assets/imgs/solution/so1.svg';
import so2 from '@/assets/imgs/solution/so2.svg';
import so3 from '@/assets/imgs/solution/so3.svg';
import so4 from '@/assets/imgs/solution/so4.svg';
import so5 from '@/assets/imgs/solution/so5.svg';
import so6 from '@/assets/imgs/solution/so6.svg';
import icon from '@/assets/imgs/solution/success.svg';
import { useI18n } from 'vue-i18n';
import config from '@/config';
const { t, locale } = useI18n();

const list = ref<any>([]);

// 中文
const listZh = [
    {
        id: 1,
        url: so1,
        title: '金融服务​​',
        tips: '适用场景​​：贷款协议、投资合同、KYC文件',
        subList: [
            {
                icon,
                title: '合规签署​​：符合金融行业基本监管要求',
            },
            {
                icon,
                title: '批量处理​​：支持多人顺序签署，确保流程清晰',
            },
            {
                icon,
                title: '自动归档​​：签署后自动归类，便于审计',
            },
        ],
    },
    {
        id: 2,
        url: so2,
        title: '房地产',
        tips: '适用场景​​：租赁合同、购房协议、物业文件',
        subList: [
            {
                icon,
                title: '移动签署​​：客户手机端直接签名',
            },
            {
                icon,
                title: '模板合规​​：预置标准条款，减少纠纷',
            },
            {
                icon,
                title: '​​催签提醒​​：租约到期自动通知',
            },
        ],
    },
    {
        id: 3,
        url: so3,
        title: 'IT运营',
        tips: '适用场景​​：供应商协议、服务合同、NDA',
        subList: [
            {
                icon,
                title: '快速审批​​：IT采购合同多方签署',
            },
            {
                icon,
                title: '​​字段灵活​​：自定义条款、签名位置',
            },
            {
                icon,
                title: '​ ​​安全存储​​：签署后自动存档',
            },
        ],
    },
    {
        id: 4,
        url: so4,
        title: '教育行业',
        tips: '适用场景​​：入学协议、培训合同、家长同意书',
        subList: [
            {
                icon,
                title: ' ​​远程签署​​：学生/家长在线完成文件，无需到场',
            },
            {
                icon,
                title: ' ​​批量处理​​：班级或团队文件一键发起签署',
            },
            {
                icon,
                title: '​ ​​合规存档​​：教育机构文件自动归档，便于审计',
            },
        ],
    },
    {
        id: 5,
        url: so5,
        title: '会计与税务',
        tips: '适用场景​​：报税文件签署​​、 ​​财务合同、发票/收据电子签收',
        subList: [
            {
                icon,
                title: '​​合规签署​​：符合财税行业文件管理要求',
            },
            {
                icon,
                title: '​​批量处理​​：支持多客户文件同时发起签署',
            },
            {
                icon,
                title: '​时效提醒​​：报税截止日前自动催签',
            },
        ],
    },
    {
        id: 6,
        url: so6,
        title: '人力资源',
        tips: '适用场景​​：劳动合同、保密协议、入职文件',
        subList: [
            {
                icon,
                title: '合规签署​​：符合金融行业基本监管要求',
            },
            {
                icon,
                title: '​​模板库​​：HR常用合同一键调用',
            },
            {
                icon,
                title: '​状态追踪​​：实时查看签署进度',
            },
        ],
    },
];

// 引文

const listEn = [
    {
        id: 1,
        url: so1,
        title: 'Financial Services',
        tips: 'Use Cases: Loan agreements, investment contracts, KYC documents',
        subList: [
            {
                icon,
                title: 'Regulatory-compliant signing',
            },
            {
                icon,
                title: 'Sequential bulk signing',
            },
            {
                icon,
                title: 'Auto-archiving for audits',
            },
        ],
    },
    {
        id: 2,
        url: so2,
        title: 'Real Estate',
        tips: 'Use Cases: Leases, purchase agreements, property documents',
        subList: [
            {
                icon,
                title: 'Mobile signing',
            },
            {
                icon,
                title: 'Pre-approved clauses',
            },
            {
                icon,
                title: 'Auto-reminders for renewals',
            },
        ],
    },
    {
        id: 3,
        url: so3,
        title: 'IT/Operations',
        tips: 'Use Cases: Vendor contracts, service agreements, NDAs',
        subList: [
            {
                icon,
                title: 'Multi-party approval',
            },
            {
                icon,
                title: '​Customizable fields',
            },
            {
                icon,
                title: '​ Secure document storage',
            },
        ],
    },
    {
        id: 4,
        url: so4,
        title: 'Education',
        tips: 'Use Cases: Enrollment forms, training contracts, parental consent',
        subList: [
            {
                icon,
                title: ' ​Remote signing',
            },
            {
                icon,
                title: ' ​Group signing',
            },
            {
                icon,
                title: '​ ​Compliant archiving',
            },
        ],
    },
    {
        id: 5,
        url: so5,
        title: 'Accounting & Tax',
        tips: 'Use Cases: Tax filings, financial contracts, e-receipts',
        subList: [
            {
                icon,
                title: '​Compliance-ready',
            },
            {
                icon,
                title: '​Multi-client processing',
            },
            {
                icon,
                title: 'Deadline reminders',
            },
        ],
    },
    {
        id: 6,
        url: so6,
        title: 'Human Resources',
        tips: 'Use Cases: Employment contracts, NDAs, onboarding docs',
        subList: [
            {
                icon,
                title: 'Digital onboarding',
            },
            {
                icon,
                title: 'Template library',
            },
            {
                icon,
                title: 'Progress tracking',
            },
        ],
    },
];

watch(
    () => locale.value,
    (val: any) => {
        if (val == 'en-US') {
            list.value = listEn;
        } else {
            list.value = listZh;
        }
    },
    {
        immediate: true,
    }
);

const login = () => {
    // 跳转不同环境的页面
    window.open(config.JUMP_URL + `?es=${locale.value}`, '__blank');
};
</script>

<style scoped lang="scss">
.solution-hed {
    background: url('@/assets/imgs/solution/bg.jpg') no-repeat center;
    background-size: cover;
}

.qy-box {
    background: url('@/assets/imgs/home/qy-bg.jpg') no-repeat center;
    background-size: cover;
}
</style>
